<template>
	<view>
		<view class="top-bar">
			<view v-if="show" class="bar-left bare-cell">
					<image style="width: 36rpx;height: 36rpx;" src="../../static/dingwei.png" mode=""></image>
					<text  @click="site">北京市</text>
					<image style="width: 18rpx;height: 18rpx;" src="../../static/xia.png" mode=""></image>
			</view>

			<view v-else class="bar-left bare-cell">
				<image style="width: 46rpx;height: 46rpx;" src="../../static/kefu.png" mode=""></image>
				<view class="input" @click="search">
					<u-search bgColor="#FFF" :showAction="false" shape="square" placeholder="请输入商品名称" v-model="keyword">
					</u-search>
				</view>
			</view>

		</view>
		<view style="height: 140rpx;"></view>

		<image class="img" src="../../static/kefu.png" mode=""></image>
		<view class="input" @click="search">
			<u-search bgColor="#FFF" :showAction="false" shape="square" placeholder="请输入商品名称" v-model="keyword">
			</u-search>
		</view>

		<view style="height: 30rpx;"></view>

		<view class="swiper1">
			<swiper class="swiper" autoplay :circular="true" :indicator-dots="true" indicator-active-color="#FFFFFF">
				<swiper-item v-for="(item,index) in list2" :key="index">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 金刚区 -->
		<view class="classify">
			<swiper class="swiper-menu" indicator-dots circular>
				<swiper-item v-for="(item,index) in classList" :key="index">
					<view class="view-menu">
						<view class="view-item" v-for="i in item" :key="i.id" @click="skip(i.name,i.id)">
							<image :src="i.img"></image>
							<text class="text-name">{{i.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="swiper2">
			<swiper class="swiper" autoplay :circular="true" :indicator-dots="true" indicator-active-color="#FFFFFF">
				<swiper-item v-for="(item,index) in 2" :key="index">
					<image src="../../static/swiper2.png"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 特价促销 -->
		<view class="promotion">
			<view class="title">特价促销</view>
			<view class="view-box">
				<view class="view-item" v-for="item in 8">
					<view class="img"></view>
					<view class="text">得力重型日式圆口带刃得力重型日式圆口带刃</view>
					<view class="price"> <text>￥22</text> <text>.5/台</text> </view>
				</view>
			</view>
		</view>

		<!-- 商品 -->
		<view class="product">
			<u-tabs :list="list4" lineWidth="30" lineColor="#1D2DA7" :activeStyle="{
			            color: '#1D2DA7',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>

			<view class="product-list">
				<view class="view-list-content">
					<view class="view-list-item" v-for="(item,index) in 11" :key="index" @click="skipDetails()">
						<image src="../../static/runhua.png" mode=""></image>
						<view class="view-info">
							<view class="view-name">得力(deli)家用工具箱套装电工木工维修工具箱套装</view>
							<view class="view-price">
								<view class="text-price"> <text>￥22</text> <text>.5/台</text> </view>
								<image src="../../static/jiahao.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<image @click="backtop" v-show="top" class="top" src="../../static/top.png" mode=""></image>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: false,
				show: true,
				keyword: '',
				list2: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				list4: [{
					name: '工具耗材'
				}, {
					name: '劳保安防'
				}, {
					name: '清洁办公'
				}, {
					name: '工控配电'
				}, {
					name: '。。。。'
				}],
				classList: [
					[{
						id: 1,
						name: '工具',
						img: '../../static/gongju.png'
					}, {
						id: 2,
						name: '搬运存储',
						img: '../../static/banyun.png'
					}, {
						id: 3,
						name: '工程机械',
						img: '../../static/gongcheng.png'
					}, {
						id: 4,
						name: '办公',
						img: '../../static/bangong.png'
					}, {
						id: 5,
						name: '润滑',
						img: '../../static/runhua.png'
					}, {
						id: 6,
						name: '清洁',
						img: '../../static/qingjie.png'
					}, {
						id: 7,
						name: '交通设施',
						img: '../../static/jiaotong.png'
					}, {
						id: 8,
						name: '紧固件',
						img: '../../static/jingu.png'
					}, {
						id: 9,
						name: '消防',
						img: '../../static/xiaofang.png'
					}, {
						id: 10,
						name: '暖通',
						img: '../../static/nuantong.png'
					}],
					[{
						id: 11,
						name: '气动液压',
						img: '../../static/gongju.png'
					}, {
						id: 12,
						name: '传动密封',
						img: '../../static/gongju.png'
					}, {
						id: 13,
						name: '仪器仪表',
						img: '../../static/gongju.png'
					}, {
						id: 14,
						name: '胶粘',
						img: '../../static/gongju.png'
					}, {
						id: 15,
						name: '劳保',
						img: '../../static/gongju.png'
					}, {
						id: 16,
						name: '园林',
						img: '../../static/gongju.png'
					}, {
						id: 17,
						name: '照明工具',
						img: '../../static/gongju.png'
					}, {
						id: 18,
						name: '电线电缆',
						img: '../../static/gongju.png'
					}, {
						id: 19,
						name: '防水',
						img: '../../static/gongju.png'
					}, {
						id: 20,
						name: '全部',
						img: '../../static/gongju.png'
					}]
				]
			}
		},
		onLoad() {

		},
		methods: {
			onPageScroll(e) {
				// console.log(e)
				if (e.scrollTop >= 50) {
					this.show = false
				} else {
					this.show = true
				}

				//返回顶部
				if (e.scrollTop >= 830) {
					this.top = true
				} else {
					this.top = false
				}
			},

			backtop() {
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			skip(x, y) {
				if (y == 20) {
					uni.navigateTo({
						url: ''
					})
				} else {
					uni.navigateTo({
						url: '../market-product-menu/market-product-menu?name=' + x + '&id=' + y
					})
				}
			},
			skipDetails() {
				uni.navigateTo({
					url: '../commodity-details/commodity-details'
				})
			},
			search() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			site() {
				uni.navigateTo({
					url: '../select-site/select-site'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.top-bar {
		height: 140rpx;
		box-sizing: border-box;
		position: fixed;
		z-index: 98;
		background-color: #f1f1f1;
		top: 0%;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;

		.bare-cell {
			margin-top: 10rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			color: #FFF;
		}

		.bar-left {
			flex: 2;
			height: 100%;
			margin-left: 30rpx;

			text {
				display: inline-block;
				margin: 0 10rpx;
				font-size: 30rpx;
				color: #222;
			}

			.input {
				width: 422rpx;
				height: 78rpx;
				display: inline-block;
				margin-left: 26rpx;
				position: relative;
				top: 10rpx;
			}
		}

		.bar-center {
			flex: 5;
			height: 100%;
		}

		.bar-right {
			flex: 1;
			height: 100%;

			.city-rigth {}
		}
	}

	.img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 30rpx;
	}

	.input {
		width: 580rpx;
		display: inline-block;
		// position: relative;
		// left: 80rpx;
	}

	.swiper1 {
		// border: 1rpx solid red;
		width: 95%;
		height: 300rpx;
		margin: auto;
		border-radius: 20rpx;

		.swiper {
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx;

			swiper-item {
				image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.classify {
		width: 95%;
		margin: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		margin-top: 30rpx;

		.swiper-menu {
			margin-top: 20rpx;
			height: 450rpx;

			//设置轮播的指示点大小
			/deep/ .uni-swiper-dots {
				// 指示点整个区域的位置
				top: 290rpx;
			}

			/deep/ .uni-swiper-dot {
				// 指示点元素默认样式
				width: 52upx !important;
				height: 10upx !important;
				background: #e4e4e4 !important;
				border-radius: 4rpx;
			}

			/deep/ .uni-swiper-dot-active {
				// 指示点元素激活（当前选中）状态样式
				width: 52upx !important;
				height: 10upx !important;
				background: #4a9aff !important;
				border-radius: 4rpx;
			}
		}

		.view-menu {
			width: 100%;
			// padding: 0rpx 30rpx;
			display: grid;
			grid-template-columns: repeat(5, 20%);

			.view-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-bottom: 29rpx;

				&:nth-child(5n) {
					margin-right: 0;
				}

				image {
					margin-top: 42rpx;
					width: 106rpx;
					height: 106rpx;
				}

				.text-name {
					font-size: 24rpx;
					font-weight: 500;
					// margin-top: 20rpx;
					font-weight: bold;
					color: #666666;
				}
			}
		}
	}

	.swiper2 {
		border-radius: 20rpx;
		width: 95%;
		height: 230rpx;
		margin: auto;
		margin-top: 30rpx;

		.swiper {
			width: 100%;
			height: 230rpx;
			border-radius: 20rpx;

			swiper-item {
				image {
					width: 100%;
					height: 230rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.promotion {
		width: 95%;
		height: 472rpx;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(#B1BAFF, #F8F8F8);

		.title {
			display: inline-block;
			margin: 20rpx 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.view-box {
			padding-bottom: 20rpx;
			overflow-x: auto;
			display: -webkit-box;
			-webkit-overflow-scrolling: touch;
			margin-left: 20rpx;
			display: flex;

			.view-item {
				border-radius: 10rpx;
				width: 220rpx;
				height: 396rpx;
				background-color: #FFF;
				margin: 0 16rpx 0 0;

				.img {
					margin: 0;
					width: 220rpx;
					height: 220rpx;
					background-color: #4a9aff;
				}

				.text {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price {
					margin-top: 20rpx;

					text {
						&:nth-child(1) {
							color: #E50014;
							font-weight: bold;
							font-size: 32rpx;
						}

						&:nth-child(2) {
							color: #E50014;
							// font-weight: bold;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}

	.product {
		margin-top: 40rpx;

		.product-list {
			width: 95%;
			background-color: #f7f7f7;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.view-list-content {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.view-list-item {
					border-radius: 20rpx;
					background: #FFF;
					width: 336rpx;
					height: 514rpx;
					flex-shrink: 1;
					margin-bottom: 30rpx;

					.view-img {
						width: 336rpx;
						height: 336rpx;
						overflow: hidden;
					}

					image {
						width: 330rpx;
						height: 330rpx;
						border-radius: 10rpx;
					}

					.view-info {
						padding: 20rpx;

						.view-name {
							width: 100%;
							height: 80rpx;
							font-size: 28rpx;
							font-weight: 500;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.view-num {
							width: 120rpx;
							height: 30rpx;
							background: rgba(74, 154, 255, 0.05);
							border: 1px solid #4A9AFF;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-weight: bold;
							color: #4A9AFF;
							line-height: 30rpx;
							text-align: center;
							margin: 20rpx 0rpx;
						}

						.view-price {
							display: flex;
							font-weight: bold;
							justify-content: space-between;
							align-items: flex-end;
							margin-top: 10rpx;

							.text-price {
								text {
									&:nth-child(1) {
										color: #E50014;
										font-weight: bold;
										font-size: 32rpx;
									}

									&:nth-child(2) {
										color: #E50014;
										// font-weight: bold;
										font-size: 26rpx;
									}
								}
							}

							image {
								width: 32rpx;
								height: 32rpx;
								// margin-bottom: 10rpx;
							}
						}
					}
				}
			}
		}
	}

	.top {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 60px;
		right: 10px;
	}
</style>
